import React, { useState } from 'react'
import Tabs from './components/Tabs/Tabs'
import Top from '../../components/Top'
import './index.scss'
import Recommend from './components/recommend/Recommend'
import ListView from '../../UI/ListView/ListView'
const tabs = [
  {
    id: '1',
    name: 'breakfast',
    text: '早餐',
    icon: require('./../../image/icon/Home/breakfast.png')
  },
  {
    id: '2',
    name: 'lunchbox',
    text: '午餐',
    icon: require('./../../image/icon/Home/lunchbox.png')
  },
  {
    id: '3',
    name: 'supper',
    text: '晚餐',
    icon: require('./../../image/icon/Home/supper.png')
  },
  {
    id: '4',
    name: 'dessert',
    text: '甜点',
    icon: require('./../../image/icon/Home/dessert.png')
  }
]
const recommendList = [
  {
    id: '1',
    src: require('./../../image/home/recommend/hmly.jpg'),
    title: '黄焖两样',
    summey: '牛肉软烂，面筋软而劲道',
    isTrue: false,
    meal: 'lunchbox'
  },
  {
    id: '2',
    src: require('./../../image/home/recommend/pjjt.jpg'),
    title: '啤酒鸡腿',
    summey: '宴客大菜，简单美味',
    isTrue: false,
    meal: 'lunchbox'
  },
  {
    id: '3',
    src: require('./../../image/home/recommend/hspg.jpg'),
    title: '红烧排骨',
    summey: '红烧排骨，每次能吃很多',
    isTrue: false,
    meal: 'lunchbox'
  },
  {
    id: '4',
    src: require('./../../image/home/recommend/jcszy.jpg'),
    title: '家常水煮鱼',
    summey: '火辣辣地道道的川味麻辣口感',
    isTrue: false,
    meal: 'lunchbox'
  },
  {
    id: '5',
    src: require('./../../image/home/recommend/tdjdb.jpg'),
    title: '土豆鸡蛋饼',
    summey: '营养健康',
    isTrue: false,
    meal: 'breakfast'
  },
  {
    id: '6',
    src: require('./../../image/home/recommend/hlbjdb.jpg'),
    title: '胡萝卜鸡蛋饼',
    summey: '简单又健康的早餐',
    isTrue: false,
    meal: 'breakfast'
  },
  {
    id: '7',
    src: require('./../../image/home/recommend/zcsmz.jpg'),
    title: '早餐三明治',
    summey: '幸福满满的早餐',
    isTrue: false,
    meal: 'breakfast'
  },
  {
    id: '8',
    src: require('./../../image/home/recommend/mlzt.jpg'),
    title: '麻辣猪蹄',
    summey: '麻辣咸香 特别的下饭',
    isTrue: false,
    meal: 'breakfast'
  },
  {
    id: '9',
    src: require('./../../image/home/recommend/hjmtp.jpg'),
    title: '黄金馒头片',
    summey: '十分钟营养早餐',
    isTrue: false,
    meal: 'supper'
  },
  {
    id: '10',
    src: require('./../../image/home/recommend/njywx.jpg'),
    title: '农家一碗香',
    summey: '地道可口的家常菜',
    isTrue: false,
    meal: 'supper'
  },
  {
    id: '11',
    src: require('./../../image/home/recommend/tdmnn.jpg'),
    title: '土豆焖牛腩',
    summey: '吃起来即下饭，又暖身',
    isTrue: false,
    meal: 'supper'
  },
  {
    id: '12',
    src: require('./../../image/home/recommend/dsx.jpg'),
    title: '地三鲜',
    summey: '超级美味下饭',
    isTrue: false,
    meal: 'supper'
  },
  {
    id: '13',
    src: require('./../../image/home/recommend/nxngbd.jpg'),
    title: '奶香南瓜布丁',
    summey: '香味十足，又香甜可口',
    isTrue: false,
    meal: 'dessert'
  },
  {
    id: '14',
    src: require('./../../image/home/recommend/bsxj.jpg'),
    title: '拔丝香蕉',
    summey: '色泽浅黄微亮，质地柔软鲜嫩',
    isTrue: false,
    meal: 'dessert'
  },
  {
    id: '15',
    src: require('./../../image/home/recommend/tlms.jpg'),
    title: '提拉米苏',
    summey: '浓郁咖啡酒香',
    isTrue: false,
    meal: 'dessert'
  },
  {
    id: '16',
    src: require('./../../image/home/recommend/gtnl.jpg'),
    title: '宫廷奶酪',
    summey: '鲜嫩香滑',
    isTrue: false,
    meal: 'dessert'
  }
]
export default class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tabName: 'breakfast',
      recommend: recommendList
    }
    this.listView = React.createRef()
  }
  componentWillMount() {
    this.handleSetTab('breakfast')
  }
  handleSetTab = (name) => {
    let arr = recommendList.filter((item) => {
      return item.meal === name
    })
    this.setState({
      tabName: name,
      recommend: arr
    })
  }
  setIstrue = (index) => {
    for (let i = 0; i < this.state.recommend.length; i++) {
      if (index === i) {
        this.state.recommend[i].isTrue = !this.state.recommend[i].isTrue
      }
    }
    this.setState({
      recommend: this.state.recommend
    })
  }

  render() {
    return (
      <div>
        <Top title="LAZY FOOD" rightIcon="search" />
        <Tabs
          tabs={tabs}
          tabName={this.state.tabName}
          handleSetTab={(name) => {
            this.handleSetTab(name)
          }}
        />
        <div className="wapper">
          <ListView ref={this.listView}>
            <Recommend
              recommendList={this.state.recommend}
              onClick={(index) => {
                this.setIstrue(index)
              }}
            ></Recommend>
          </ListView>
        </div>
      </div>
    )
  }
}
